import { createRouter, createWebHistory } from 'vue-router'
import ContentArea from '../components/ContentArea.vue'
import SkillDetail from '../components/SkillDetail.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: ContentArea,
    props: { initialPage: 'home' }
  },
  {
    path: '/news',
    name: 'News',
    component: ContentArea,
    props: { initialPage: 'news' }
  },
  {
    path: '/character',
    name: 'Character',
    component: ContentArea,
    props: { initialPage: 'character' }
  },
  {
    path: '/heroes',
    name: 'Heroes',
    component: ContentArea,
    props: { initialPage: 'character' }
  },
  {
    path: '/stage',
    name: 'Stage',
    component: ContentArea,
    props: { initialPage: 'stage' }
  },
  {
    path: '/scene',
    name: 'Scene',
    component: ContentArea,
    props: { initialPage: 'stage' }
  },
  {
    path: '/weapon-display',
    name: 'weapon-display',
    component: ContentArea,
    props: { initialPage: 'weapon' }
  },
  {
    path: '/weapon-manage',
    name: 'weapon-manage',
    component: ContentArea,
    props: { initialPage: 'weapon-management' }
  },
  // 兼容旧路由，重定向到武器展示
  {
    path: '/weapon',
    redirect: '/weapon-display'
  },
  {
    path: '/media',
    name: 'Media',
    component: ContentArea,
    props: { initialPage: 'media' }
  },
  {
    path: '/admin',
    name: 'Admin',
    component: ContentArea,
    props: { initialPage: 'user-management' },
    meta: { requiresAuth: true, requiresAdmin: true }
  },
  {
    path: '/profile',
    name: 'Profile',
    component: ContentArea,
    props: { initialPage: 'profile' },
    meta: { requiresAuth: true }
  },
  {
    path: '/settings',
    name: 'Settings',
    component: ContentArea,
    props: { initialPage: 'settings' },
    meta: { requiresAuth: true }
  },
  {
    path: '/hero-management',
    name: 'HeroManagement',
    component: ContentArea,
    props: { initialPage: 'hero-management' },
    meta: { requiresAuth: true, requiresAdmin: true }
  },
  {
    path: '/scene-management',
    name: 'SceneManagement',
    component: ContentArea,
    props: { initialPage: 'scene-management' },
    meta: { requiresAuth: true, requiresAdmin: true }
  },
  {
    path: '/weapon-management',
    name: 'WeaponManagement',
    component: ContentArea,
    props: { initialPage: 'weapon-management' },
    meta: { requiresAuth: true, requiresAdmin: true }
  },
  {
    path: '/skill-management',
    name: 'SkillManagement',
    component: ContentArea,
    props: { initialPage: 'skill-management' },
    meta: { requiresAuth: true, requiresAdmin: true }
  },
  {
    path: '/skill/:skillId',
    name: 'SkillDetail',
    component: SkillDetail,
    props: true
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

// 路由守卫
router.beforeEach((to, from, next) => {
  // 检查是否需要认证（兼容后端 Session 登录，无需 token）
  if (to.meta.requiresAuth) {
    const userInfoStr = localStorage.getItem('userInfo')
    let userInfo = {}
    try {
      userInfo = userInfoStr ? JSON.parse(userInfoStr) : {}
    } catch (_) {
      userInfo = {}
    }

    if (!userInfo || !userInfo.id) {
      // 未登录，触发登录事件并停留在当前页面
      window.dispatchEvent(new CustomEvent('show-login-modal'))
      next(false) // 阻止路由跳转
      return
    }
  }
  
  // 检查是否需要管理员权限
  if (to.meta.requiresAdmin) {
    const userInfoStr = localStorage.getItem('userInfo')
    let userInfo = {}
    try {
      userInfo = userInfoStr ? JSON.parse(userInfoStr) : {}
    } catch (_) {
      userInfo = {}
    }
    if (userInfo.userRole !== 'admin') {
      // 非管理员，显示权限不足提示并停留在当前页面
      alert('权限不足，需要管理员权限才能访问此页面')
      next(false) // 阻止路由跳转
      return
    }
  }
  
  next()
})

export default router